<template>
  <div class="margrinThirty" style="height: 100vh;">
    <div style="margin-bottom: 15px;">
      <router-link to="">
        <el-button @click="$router.back(-1)" type="primary" size="medium">返回</el-button>
      </router-link>
    </div>
    <div class="contentCss">
      <div class="comboTitle">课程信息</div>
      <div class="comboMain">
        <div class="widthFive">
          <div class="margrinThirty">
            <div class="imageCss">
              <div style="width: 90px;"><span class="spanTitle">封面</span>
                <el-tooltip placement="top" style="line-height: 100px;margin-right: 30px;">
                  <div slot="content">请上传封面图片</div>
                  <i class="el-icon-info" style="font-size: 18px;"></i>
                </el-tooltip>
              </div>
              <!-- 封面图片 -->
              <div style="text-align: left;display: flex;margin-bottom: 20px;width: 100%;">
                <el-upload class="avatar-uploader" action="https://qiashangyun.rzkeji.com/api/file/upload-img/" name='photo'
                  list-type="picture-card" :file-list="fileList" :on-success="handleAvatarSuccess" :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogImage">
                  <img width="100%" :src="imageUrl" alt="">
                </el-dialog>
              </div>
            </div>
            <div><span class="spanTitle">课程名称：</span>
              <el-input class="widthFive" v-model="form.name"></el-input>
            </div>

            <div class="margrinTopTwenty"><span class="spanTitle">课程简介：</span>
              <el-input class="widthFive" v-model="form.desc"></el-input>
            </div>
            <div class="margrinTopTwenty" style="display: flex"><span class="spanTitle" > 标 准 价 ：</span>
                <el-input-number v-model="form.price" :min="0" :precision="2" :controls="false" placeholder="请输入标准价格"></el-input-number>
                <span style="margin-left: 10px;margin-right: 10px">元</span>
                <el-input style="width: 100px;" v-model="form.price_desc"  placeholder="例:/人"></el-input>
            </div>
            <div class="margrinTopTwenty"><span class="spanTitle">次数会员价：</span>
              <el-radio v-model="changeNumVip" label="0">否</el-radio>
              <el-radio v-model="changeNumVip" label="1">是</el-radio>
              <span v-if="changeNumVip==1">
                <el-input-number v-model="form.num_vip_price" :min="0" :precision="0" :controls="false" placeholder="请输入消耗次数"></el-input-number>
                次
              </span>
            </div>
            <div class="margrinTopTwenty"><span class="spanTitle">年费会员价：</span>
              <el-radio v-model="changeTimeVip" label="0">否</el-radio>
              <el-radio v-model="changeTimeVip" label="1">是</el-radio>
              <span v-if="changeTimeVip==1">
                <el-input-number v-model="form.time_vip_price" :min="0" :precision="2" :controls="false" placeholder="请输入年费会员价格"></el-input-number>
                元
              </span>

            </div>
            <div class="margrinTopTwenty">
              <span class="spanTitle">课程类型：</span>
              <el-select v-model="form.type_arr" placeholder="请选择课程类型" multiple collapse-tags filterable>
                <el-option v-for="item in typeList" :key="item.id" :label="item.label" :value="item.id" />
              </el-select>
            </div>
            <!-- 添加标签 -->
            <div style="margin-top: 20px;">
              <div style="display: flex;line-height: 40px;">

                <div class="tasklabel" style="display: flex;">
                  <span class="spanTitle">课程标签：</span>
                  <el-input v-model="tagOne" placeholder="标签，例如：名师课程"></el-input>
                </div>
                <el-button type="primary" style="width: 60px;height: 40px;padding: 0px;margin-left: 10px;" @click="addTagOnes(tagOne)">添加</el-button>
              </div>
              <div v-if="dynamicTags.length>0" style="width: 340px;margin: 10px 0px 10px 76px;text-align: center;">
                <el-tag :key="tag" type="warning" style="margin-right: 5px;margin-bottom: 5px;" v-for="tag in dynamicTags"
                  closable :disable-transitions="false" @close="handleCloseTag(tag)">
                  {{tag}}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
        <div class="widthFive">
          <div class="margrinTopTwenty">
            <span class="spanTitle">导师名称：</span>
            <el-select v-model="form.teacher_id" placeholder="请选择导师">
              <el-option v-for="item in teacherList" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
          </div>
          <div class="margrinTopTwenty">
            <div class="margrinTopTwenty">
              <span class="spanTitle">学习形式：</span>
              <el-radio v-model="form.study_type" label="online">线上</el-radio>
              <el-radio v-model="form.study_type" label="come">线下</el-radio>
            </div>
          </div>
          <!-- 地点 -->
          <div style="margin-top: 20px;">
            <div v-if="form.study_type=='come'">
              <div style="text-align: left;">
                <span class="spanTitle">上课地点：</span>
                <el-cascader placeholder="选择所在的地址" :options="ORIGIN" :props="{value:'label'}" v-model="area" filterable></el-cascader>
                <el-input style="width: 40%;margin-left: 10px;" v-model="address" placeholder="请输入详细地址"></el-input>
              </div>
            </div>
          </div>

          <div class="margrinTopTwenty">
            <span class="spanTitle">精选课程：</span>
            <el-radio v-model="form.is_featured" label="0">否</el-radio>
            <el-radio v-model="form.is_featured" label="1">是</el-radio>
          </div>
          <div style="margin-top: 20px;">
            <div>
              <span class="spanTitle">需要签到：</span>
              <el-radio v-model="form.need_check_in" label="0">否</el-radio>
              <el-radio v-model="form.need_check_in" label="1">是</el-radio>
            </div>
            <div v-if="form.need_check_in==1">
              <div class="margrinTopTwenty">
                <span class="spanTitle">签到积分：</span>
                <span>
                  <el-input v-model="form.check_in_integral" style="width: 15%;margin-right: 5px;"></el-input>分/天/次
                  <!-- <el-input v-model="form.check_per_day" style="width: 15%;margin-right: 5px;"></el-input> -->
                </span>
              </div>
            </div>
          </div>

          <div class="margrinTopTwenty">
            <span class="spanTitle">开启状态：</span>
            <el-radio v-model="form.status" label="0">下架</el-radio>
            <el-radio v-model="form.status" label="1">上架</el-radio>
          </div>
          <div class="margrinTopTwenty">
            <span class="spanTitle">课程排序：</span>
            <!-- <el-input style="width: 50%;" v-model="form.sort" placeholder="请输入，数字越小排序越靠前"></el-input> -->
            <el-input-number v-model="form.sort" :min="1" controls-position="right" placeholder="请输入，数字越小排序越靠前"></el-input-number>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二部分 -->
    <div class="contentCss">

      <div class="comboTitle">课程目录</div>
      <div style="margin: 20px;">
        <el-table :data="contentsList" :header-cell-style="{background:'#eef1f6',color:'#606266'}" border style="width: 100%;">
          <!-- <el-table-column align="center" type="index" label="序号" /> -->
          <el-table-column sortable align="center" prop="section_num" label="章节序号" />
          <el-table-column sortable align="center" prop="section_name" label="章节名称" />
          <el-table-column sortable align="center" prop="allow_try" label="试学">
            <template slot-scope="scope">
              <div v-if="scope.row.allow_try=='1'">是</div>
              <div v-if="scope.row.allow_try=='0'">否</div>
            </template>
          </el-table-column>
          <el-table-column sortable align="center" prop="allow_try" label="试学时长(秒)">
            <template slot-scope="scope">
              <div>{{scope.row.attempt_learn_time}}</div>
            </template>
          </el-table-column>
          <el-table-column sortable align="center" prop="video_name" label="章节内容">
            <template slot-scope="scope">
              <el-button type="text" @click="clickShowVideo(scope.row.video_url)">
                {{scope.row.video_name}}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column sortable align="center" prop="created_at" label="创建时间" />
          <el-table-column sortable align="center" prop="created_at" label="更新时间" />
          <el-table-column align="center" label="操作" width="230px">
            <template slot-scope="scope">
              <el-button type="warning" size="mini" @click="updateMsg(scope.row,scope.$index)">编辑</el-button>
              <el-button type="danger" size="mini" @click="delMsg(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: left;">
          <el-button type="text" @click="addSection">添加章节</el-button>
        </div>
        <div>
          <!-- 添加模态款 -->
          <el-dialog style="text-align: center;font-weight: bold;color: #626365;" :title="title" :close-on-click-modal="false"
            :visible.sync="modelMsg">
            <div class="msgDiv">
              <div>
                <el-form ref="form" :model="form" label-width="100px">
                  <el-form-item label="章节序号" style="text-align: left;">
                    <el-input-number v-model="contentsData.section_num" :min="1" controls-position="right" placeholder="请输入章节序号"></el-input-number>
                  </el-form-item>
                  <el-form-item label="章节名称">
                    <el-input v-model="contentsData.section_name" placeholder="请输入章节名称"></el-input>
                  </el-form-item>
                  <div class="imageCss">
                    <div style="margin-left: -45px;padding-left: 10px;"><span class="spanTitle" style="font-weight: 500;">上传</span>
                      <el-tooltip placement="top" style="line-height: 100px;margin-right: 20px;">
                        <div slot="content">请上传视频,建议上传.MP4格式<br>并且最大不超过2G</div>
                        <i class="el-icon-info" style="font-size: 18px;"></i>
                      </el-tooltip>
                    </div>
                    <!-- 视频 -->
                    <div class="videoCss" style="text-align: left;display: flex;">
                      <el-upload class="avatar-uploader" action="https://qiashangyun.rzkeji.com/api/file/upload-video/" name='video'
                        :show-file-list="false" :on-success="handleVideoSuccess" :on-progress="onProgress">
                        <div v-if="videoFlag==false">
                          <div v-if="contentsData.video_url">
                            <video controls="controls" muted="muted" preload="preload" @click.stop="" width="300px"
                              height="200px" @mouseover="showDelPic = true">
                              <source :src="contentsData.video_url">
                            </video>
                            <i v-show="showDelPic" @click.stop="removeVideo" @mouseleave="showDelPic=false" class="el-icon-delete deleteClass"></i>
                          </div>
                          <i v-if="!contentsData.video_url" class="el-icon-plus avatar-uploader-icon" style="width: 300px;height: 200px;line-height: 200px;"></i>
                        </div>
                        <div v-if="videoFlag==true" style="width: 300px;height: 200px;line-height: 200px;">
                          <el-progress :width="200" type="circle" :percentage="videoUploadPercent"></el-progress>
                        </div>
                      </el-upload>
                    </div>
                  </div>
                  <el-form-item label="允许试学" style="text-align: left;">
                    <el-radio v-model="contentsData.allow_try" label="0">不允许</el-radio>
                    <el-radio v-model="contentsData.allow_try" label="1">允许</el-radio>
                  </el-form-item>
                  <el-form-item v-if="contentsData.allow_try==1" label="试学时长" style="text-align: left;">
                    <el-input v-model="contentsData.attempt_learn_time" style="width: 150px;margin-right: 5px;"></el-input><span
                      style="color: #575757;">秒</span>
                  </el-form-item>
                  <el-button style="text-align: right;" type="success" @click="addMsg(contentsData)">{{addORupdate}}</el-button>
                </el-form>

              </div>
            </div>
          </el-dialog>
          <!-- 展示视频 -->
          <div class="showVideoCss">
            <el-dialog style="text-align: center;font-weight: bold;color: #626365;" title="查看视频" :destroy-on-close="true"
              :show-close="false" :visible.sync="showVideo">
              <video :src="video_url" controls="controls" muted="muted" preload="preload" width="100%" height="100%">
              </video>
              <div style="text-align: center;margin-top: 10px;">
                <el-button type="primary" @click.stop="showVideo=false">关闭</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <!-- 第三部分 -->
    <div class="contentCss">
      <div class="comboTitle">答题互动</div>
      <div style="margin: 20px;">
        <el-table :data="questionList" :header-cell-style="{background:'#eef1f6',color:'#606266'}" border style="width: 100%;">
          <el-table-column align="center" type="index" label="序号" />
          <el-table-column align="center" prop="id" label="ID" />
          <el-table-column sortable align="center" prop="question" label="题目名称" />
          <el-table-column sortable align="center" prop="sort" label="题目顺序" />
          <el-table-column sortable align="center" prop="integral" label="积分" />
          <el-table-column sortable align="center" prop="limit_num" label="最大作答次数" />
          <el-table-column sortable align="center" prop="option" label="选项">
            <template slot-scope="scope">
              <div v-for="item in scope.row.option">
                <span style="color: #0000FF;margin-right: 20px;">
                  <span v-if="item.is_true==1">✓</span>
                </span>
                <span>{{item.option}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="230px">
            <template slot-scope="scope">
              <el-button type="warning" size="mini" @click="updateTitleClick(scope.row,scope.$index)">编辑</el-button>
              <el-button type="danger" size="mini" @click="delTitle(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: left;">
          <el-button type="text" @click="addTitle">添加题目</el-button>
        </div>
        <div>
          <!-- 添加题目模态款 -->
          <el-dialog style="text-align: center;font-weight: bold;color: #626365;" :title="title" :close-on-click-modal="false"
            :visible.sync="modelTitle">
            <div class="msgDiv">
              <div>
                <el-form ref="form" :model="form" label-width="100px">
                  <el-form-item label="序号" v-show="vshow">
                    <el-input v-model="questionData.id" placeholder="序号" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="题目名称">
                    <el-input v-model="questionData.question" placeholder="请输入题目名称"></el-input>
                  </el-form-item>
                  <el-form-item label="题目答案" style="text-align: left;">
                    <el-checkbox v-model="titleAndAnswer.checked1" style="margin-bottom: 10px;">
                      <el-input v-model="titleAndAnswer.answer1"></el-input>
                    </el-checkbox>
                    <el-checkbox v-model="titleAndAnswer.checked2" style="margin-bottom: 10px;">
                      <el-input v-model="titleAndAnswer.answer2"></el-input>
                    </el-checkbox>
                    <el-checkbox v-model="titleAndAnswer.checked3" style="margin-bottom: 10px;">
                      <el-input v-model="titleAndAnswer.answer3"></el-input>
                    </el-checkbox>
                    <el-checkbox v-model="titleAndAnswer.checked4" style="margin-bottom: 10px;">
                      <el-input v-model="titleAndAnswer.answer4"></el-input>
                    </el-checkbox>
                  </el-form-item>
                  <el-form-item label="题目顺序" style="text-align: left;">
                    <el-input-number v-model="questionData.sort" :min="1" controls-position="right" placeholder="请输入顺序，数字越小排序越靠前"></el-input-number>
                  </el-form-item>
                  <el-form-item label="答对积分" style="text-align: left;">
                    <el-input-number v-model="questionData.integral" controls-position="right" placeholder="请输入答对积分"></el-input-number>
                  </el-form-item>
                  <el-form-item label="答题次数" style="text-align: left;">
                    <el-input-number v-model="questionData.limit_num" controls-position="right" placeholder="请输入最多答题数"></el-input-number>
                  </el-form-item>

                  <el-button style="text-align: right;" type="success" @click="addTitleSubmit(titleAndAnswer)">{{addORupdate}}</el-button>
                </el-form>

              </div>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>

    <!-- 第四部分 -->
    <div class="contentCss">
      <div class="comboTitle">积分规则</div>
      <div style="margin: 20px;">
        <div style="line-height: 40px;">
          <span>积分兑换课程：</span>
          <el-radio v-model="form.is_integral_exchange" label="0">否</el-radio>
          <el-radio v-model="form.is_integral_exchange" label="1">是</el-radio>
          <span v-if="form.is_integral_exchange=='1'" class="margrinTopTwenty">
            <el-input v-model="form.exchange_integral" placeholder="兑换所需" style="width: 10%;margin-right: 5px;"></el-input>积分
          </span>
        </div>
        <div style="line-height: 40px;margin-top: 10px;">
          <span>邀请用户获得：</span>
          <el-input v-model="form.share_integral" placeholder="邀请用户成功购买获得的积分" style="width: 230px;margin-right: 5px;"></el-input>积分
        </div>
      </div>
    </div>
    <!-- 第五部分 -->
    <div class="contentCss">
      <div class="comboTitle">课程介绍</div>
      <div style="margin: 20px;">
        <vue-ueditor-wrap ref="vueUeditor" @change.native="ueditorChange" v-model="form.introduce" :config="myConfig"></vue-ueditor-wrap>
      </div>
    </div>
    <!-- 提交 -->
    <div style="text-align: center;margin-bottom: 30px;">
      <el-button type="success" @click="submitAll">提交</el-button>
    </div>


  </div>
</template>

<script>
  import ORIGIN from '../../../assets/json/origin.json'
  import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
  export default {
    data() {
      return {
        ORIGIN,
        form: {
          id: "",
          thumb_id: [],
          name: "",
          desc: "",
          price: "",
          price_desc:"",
          num_vip_price: "",
          time_vip_price: "",
          study_type: "come",
          address: "",
          teacher_id: "",
          is_featured: "1",
          need_check_in: "1",
          check_in_integral: "",
          is_integral_exchange: "1",
          exchange_integral: "",
          share_integral: "",
          status: "1",
          sort: "",
          label_arr: [],
          type_arr: [],
          contents_arr: [],
          question_arr: [],
          check_per_day: 1,
          introduce: "" //课程介绍富文本
        },

        changeNumVip: "0",
        changeTimeVip: "0",
        type_id: [],
        imageUrl: "",
        fileList: [],
        dialogImage: false,
        showDelPic: false,
        modelMsg: false,
        modelTitle: false,
        showVideo: false,
        vshow: false,
        title: "",
        addORupdate: "",
        contentsData: {
          id: "",
          section_num: "",
          section_name: "",
          video_id: "",
          video_name: "",
          video_url: "",
          allow_try: "1",
          attempt_learn_time: 0
        },
        questionData: {
          id: "",
          question: "",
          sort: "",
          integral: "",
          limit_num: "",
          option: [{
            id: "",
            option: "",
            is_true: ""
          }]
        },
        titleAndAnswer: {
          checked1: "",
          checked2: "",
          checked3: "",
          checked4: "",
          answer1: "",
          answer2: "",
          answer3: "",
          answer4: "",
        },
        questionList: [],
        video_url: "", //展示大视频
        contentsList: [],
        formOne: [],
        typeList: [],
        teacherList: [],
        area: [],
        address: "",
        tagOne: "",
        dynamicTags: [], //任务标签
        studyWays: [{
            "id": "online",
            "label": "线上"
          },
          {
            "id": "come",
            "label": "线下"
          }
        ],
        index: null,
        videoFlag: false,
        videoUploadPercent: "",
        updateid: undefined,
        myConfig: {
          // imageMaxSize: 2048000, /* 上传大小限制，单位B */
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 500,
          // enableAutoSave: false,
          // 初始容器宽度
          initialFrameWidth: '50%',
          // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
          // serverUrl: 'http://35.201.165.105:8000/controller.php',
          serverUrl: 'https://qiashangyun.rzkeji.com/ueditor-php/controller.php',
          // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
          //UEDITOR_HOME_URL: '/peoples_association_backstage/dist//static/UEditor/'
          UEDITOR_HOME_URL: '/UEditor/',
          zIndex: 10001,
          toolbars: [
            [
              'undo', 'redo', '|',
              'bold', 'italic', 'underline', 'strikethrough',
              'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor',
              'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
              'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
              'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
              'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
              'simpleupload', 'music',
              'horizontal', 'date', 'time',
              'inserttable', 'link',
              // 'insertimage', 'insertvideo',

            ]
          ]
        },
      }
    },
    components: {
      VueUeditorWrap
    },
    created() {
      this.updateid = this.$route.query.id

    },
    mounted() {
      this.getCourseTypeList()
      this.getTeacherList()
      if (this.updateid > 0) {
        this.updateDetail(this.updateid)
      }
    },
    methods: {
      //查看大视频
      clickShowVideo(video_url) {
        this.showVideo = true
        this.video_url = video_url
      },
      /* 修改 */
      updateDetail(updateid) {
        this.$api.getCourseDetail({
          course_id: updateid
        }).then(res => {
          let data = res.data.data
          //地址处理
          let areaList = []
          let addressList = data.address.split("/")
          areaList.push(addressList[0])
          areaList.push(addressList[1])
          areaList.push(addressList[2])
          this.area = areaList
          this.address = addressList[3]
          this.form.desc = data.desc
          this.form.price_desc = data.price_desc
          this.form.name = data.name
          this.form.price = data.price
          this.form.num_vip_price = data.num_vip_price
          this.form.time_vip_price = data.time_vip_price
          this.form.num_vip_price > 0 ? this.changeNumVip = "1" : this.changeNumVip = "0"
          this.form.time_vip_price > 0 ? this.changeTimeVip = "1" : this.changeTimeVip = "0"
          /* 课程类型 获取*/
          data.type_info.forEach(item => {
            this.form.type_arr.push(parseInt(item.classify_id))
          })
          /* 课程标签 获取*/
          data.label_info.forEach(item => {

            this.dynamicTags.push(item.name)
          })
          this.form.id = data.id
          console.log("修改的类型")
          console.log(typeof(data.thumb_id))
          //为了兼容之前的单张图片上传。判断后端传过来的data.thumb_id是什类型；string就push 进数组。object就直接等赋值
          if (typeof(data.thumb_id) == "string") {
            this.form.thumb_id.push(parseInt(data.thumb_id))
          } else {
            this.form.thumb_id = data.thumb_id
          }
          //把图片路径带上到fileList
          data.thumb_url.forEach((item, index) => {
            //参数对应上传图片的字段，不然删除会出问题。
            let filelist = {
              url: item,
              response: {
                data: {
                  id: data.thumb_id[index]
                }
              }
            }
            this.fileList.push(filelist)
          })
          this.form.label_arr = this.dynamicTags
          this.form.teacher_id = parseInt(data.teacher_id)
          this.form.study_type = data.study_type
          this.form.is_featured = data.is_featured
          this.form.need_check_in = data.need_check_in
          this.form.check_in_integral = data.check_in_integral
          this.form.share_integral = data.share_integral
          this.form.exchange_integral = data.exchange_integral
          this.form.is_integral_exchange = data.is_integral_exchange

          this.form.check_per_day = data.check_per_day
          this.form.status = data.status
          this.form.sort = data.sort
          this.form.introduce = data.introduce //课程介绍富文本
          // this.imageUrl = data.thumb_url
          this.contentsList = data.content_info
          this.questionList = data.question_info

        })
      },
      /* 全部数据提交到后端*/
      submitAll() {

        /* 显示加载中。。。 */
        const loadingOne = this.$loading({
          lock: true,
          text: '保存中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        if (this.form.is_integral_exchange == 0) {
          this.form.exchange_integral = ""
        }
        this.changeNumVip == 0 ? this.form.num_vip_price = "" : this.form.num_vip_price,
          this.changeTimeVip == 0 ? this.form.time_vip_price = "" : this.form.time_vip_price

        this.form.address = this.area[0] + "/" + this.area[1] + "/" + this.area[2] + "/" + this.address
        this.form.contents_arr = this.contentsList
        this.form.question_arr = this.questionList

        this.$api.setCourse(this.form).then(res => {
          if (res.data.level == "success") {
            loadingOne.close()
            this.$message.success(res.data.message)
            setTimeout(() => {
              this.$router.push("/courseManage/courseList")
            }, 500)
          } else {
            loadingOne.close()
            this.$message.error(res.data.message)
          }
        })
      },
      checkTitle(id, answer, checked) {
        let opt = {
          id: id,
          option: answer,
          is_true: ""
        }
        if (checked == true) {
          opt.is_true = 1
        } else {
          opt.is_true = 0
        }
        this.questionData.option.push(opt)
      },
      //添加题目信息
      addTitleSubmit(titleAndAnswer) {
        this.questionData.option = []
        this.checkTitle(titleAndAnswer.id1, titleAndAnswer.answer1, titleAndAnswer.checked1)
        this.checkTitle(titleAndAnswer.id2, titleAndAnswer.answer2, titleAndAnswer.checked2)
        this.checkTitle(titleAndAnswer.id3, titleAndAnswer.answer3, titleAndAnswer.checked3)
        this.checkTitle(titleAndAnswer.id4, titleAndAnswer.answer4, titleAndAnswer.checked4)
        console.log(this.questionData)
        let tempObj = {
          id: this.questionData.id,
          question: this.questionData.question,
          sort: this.questionData.sort,
          integral: this.questionData.integral,
          limit_num: this.questionData.limit_num,
          option: this.questionData.option,
        }
        if (this.index == null) {
          /* 添加 */
          this.questionList.push(tempObj)
          this.modelTitle = false
        } else {
          /* 修改 */
          this.questionList.splice(this.index, 1, tempObj)
          this.modelTitle = false
        }
      },
      //添加题目
      addTitle() {
        this.modelTitle = true
        this.title = '添加题目信息'
        this.addORupdate = "添加",
          this.vshow = false
        this.questionData.id = 0
        this.questionData.question = ""
        this.questionData.sort = ""
        this.questionData.integral = ""
        this.questionData.limit_num = ""
        this.questionData.option = []
        this.index = null
        this.titleAndAnswer.id1 = ""
        this.titleAndAnswer.id2 = ""
        this.titleAndAnswer.id3 = ""
        this.titleAndAnswer.id4 = ""
        this.titleAndAnswer.checked1 = ""
        this.titleAndAnswer.checked2 = ""
        this.titleAndAnswer.checked3 = ""
        this.titleAndAnswer.checked4 = ""
        this.titleAndAnswer.answer1 = ""
        this.titleAndAnswer.answer2 = ""
        this.titleAndAnswer.answer3 = ""
        this.titleAndAnswer.answer4 = ""
      },
      //删除课程目录
      delTitle(index) {
        this.questionList.splice(index, 1)
      },
      updateTitleClick(question, index) {
        console.log(question)
        this.modelTitle = true
        this.title = '修改题目信息'
        this.addORupdate = "修改",
          this.vshow = true
        this.questionData.id = question.id
        this.questionData.question = question.question
        this.questionData.sort = question.sort
        this.questionData.integral = question.integral
        this.questionData.limit_num = question.limit_num
        this.questionData.option = question.option
        this.index = index
        for (let i = 0; i < this.questionData.option.length; i++) {
          let flag = this.questionData.option[i].is_true == 1 ? true : false
          console.log(i)
          if (i == 0) {
            this.titleAndAnswer.id1 = this.questionData.option[i].id
            this.titleAndAnswer.checked1 = flag
            this.titleAndAnswer.answer1 = this.questionData.option[i].option
          }
          if (i == 1) {
            this.titleAndAnswer.id2 = this.questionData.option[i].id
            this.titleAndAnswer.checked2 = flag
            this.titleAndAnswer.answer2 = this.questionData.option[i].option
          }
          if (i == 2) {
            this.titleAndAnswer.id3 = this.questionData.option[i].id
            this.titleAndAnswer.checked3 = flag
            this.titleAndAnswer.answer3 = this.questionData.option[i].option
          }
          if (i == 3) {
            this.titleAndAnswer.id4 = this.questionData.option[i].id
            this.titleAndAnswer.checked4 = flag
            this.titleAndAnswer.answer4 = this.questionData.option[i].option
          }
        }

      },
      //删除课程目录
      delMsg(index) {
        this.contentsList.splice(index, 1)
      },
      //添加章节
      addSection() {
        this.modelMsg = true
        this.title = '添加章节信息'
        this.addORupdate = "添加",
          this.vshow = false
        this.contentsData.id = ""
        this.contentsData.section_num = ""
        this.contentsData.section_name = ""
        this.contentsData.video_id = ""
        this.contentsData.video_url = ""
        this.contentsData.allow_try = "0"
        this.contentsData.attempt_learn_time = "0"
        this.videoUploadPercent = 0
        this.videoFlag = false
        this.index = null
        console.log(this.index)
      },
      async addMsg(form) {
        form.allow_try == 0 ? form.attempt_learn_time = 0 : form.attempt_learn_time
        let tempObj = {
          id: form.id,
          section_num: form.section_num,
          section_name: form.section_name,
          video_id: form.video_id,
          video_name: form.video_name,
          video_url: form.video_url,
          allow_try: form.allow_try,
          attempt_learn_time: form.attempt_learn_time
        }
        if (this.index == null) {
          /* 添加 */
          this.contentsList.push(tempObj)
          this.modelMsg = false
        } else {

          /* 修改 */
          this.contentsList.splice(this.index, 1, tempObj)
          this.modelMsg = false
        }
      },
      updateMsg(form, index) {
        this.modelMsg = true
        this.title = '修改章节信息'
        this.addORupdate = "修改",
          this.vshow = true
        this.contentsData.section_num = form.section_num
        this.contentsData.section_name = form.section_name
        this.contentsData.video_id = form.video_id
        this.contentsData.video_name = form.video_name
        this.contentsData.video_url = form.video_url
        this.contentsData.allow_try = form.allow_try
        this.contentsData.attempt_learn_time = form.attempt_learn_time

        this.index = index
        console.log(this.index)
      },
      //添加单个任务标签
      addTagOnes(tagOne) {
        if (tagOne == "") {
          this.$message({
            type: "warning",
            message: "标签不能为空"
          })
          return false
        }
        for (let i = 0; i < this.dynamicTags.length; i++) {
          if (this.dynamicTags[i] == tagOne) {
            this.$message({
              type: "warning",
              message: "标签已存在"
            })
            return false
          }
        }
        this.dynamicTags.push(tagOne)
        this.form.label_arr = this.dynamicTags
      },
      //删除单个任务标签
      handleCloseTag(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
      //获取导师列表
      getTeacherList() {
        this.teacherList = []
        let params = {
          "page": 1,
          "limit": 100000
        }
        this.$api.getTeacherList(params).then(res => {
          res.data.data.forEach(item => {
            let option = {
              "id": item.id,
              "label": item.name
            }
            this.teacherList.push(option)
          })
        })
      },
      //获取课程类型列表
      getCourseTypeList() {
        this.typeList = []
        let params = {
          "page": 1,
          "limit": 100000
        }
        this.$api.getCourseTypeList(params).then(res => {
          res.data.data.forEach(item => {
            let option = {
              "id": item.id,
              "label": item.name
            }
            this.typeList.push(option)
          })
        })
      },
      //视频上传
      handleVideoSuccess(res, file) {
        console.log(res)
        console.log(file)
        this.contentsData.video_id = res.data.id
        this.contentsData.video_name = res.data.video_name
        this.contentsData.video_url = res.data.video_url;
        this.videoUploadPercent = 0
        this.videoFlag = false;
      },
      //上传进度条
      onProgress(event, file, fileList) {
        this.videoFlag = true;
        this.videoUploadPercent = file.percentage.toFixed(1) * 1;
      },
      removeVideo() {
        this.contentsData.video_id = ""
        this.contentsData.video_name = ""
        this.contentsData.video_url = ""
      },
      //图片上传
      async handleAvatarSuccess(res, file) {
        this.form.thumb_id.push(res.data.id)
      },
      //删除图片
      handleRemove(file, fileList) {
        console.log(fileList)
        console.log(this.form.thumb_id)
        this.form.thumb_id.forEach((item, index) => {
          if (item == file.response.data.id) {
            this.form.thumb_id.splice(index, 1)
          }
        })
        console.log(this.form.thumb_id)
      },
      //查看大图
      handlePictureCardPreview(file) {
        console.log(file.url)
        this.imageUrl = file.url;
        this.dialogImage = true;
      },
      removeDel() {
        this.imageUrl = ""
        this.form.logo_img_id = 0
        // this.showDelPic = false
      },
      // 控制富文本图片内容的宽度
      ueditorChange() {
        const iframe = this.$refs.vueUeditor.$el.querySelector('iframe');
        const iframeDOM = iframe.contentWindow.document || iframe.contentDocument;
        const imgList = iframeDOM.querySelectorAll('img');
        imgList.forEach(item => {
          item.style.width = '100%';
        })
      },
    }
  }
</script>

<style scoped="scoped">
  .showVideoCss /deep/.el-dialog {
    width: 60% !important;
    margin-top: 8vh !important;
  }

  /deep/.el-dialog {
    width: 35% !important;
    margin-top: 6vh !important;
  }

  .msgDiv /deep/label {
    font-weight: 500;
    color: #575757;
  }

  .msgDiv {
    width: 90%;
    margin: auto;
    text-align: center;
    padding: 15px;
  }

  .margrinThirty {
    margin: 25px;
  }

  .contentCss {
    margin-top: 30px;
    margin-left: 50px;
  }

  .margrinTopTwenty {
    margin-top: 20px;
    height: 40px;
    line-height: 40px;
  }

  .comboTitle {
    font-size: 20px;
    font-weight: bold;
  }

  .comboMain {
    display: flex;
  }

  .widthFive {
    width: 50%;
  }

  .spanTitle {
    /* width: 100px; */
    display: inline-block;
    text-align: left;
  }

  .imageCss {
    display: flex;
    line-height: 60px;
    margin-right: -20px;
  }

  .widthTwentyPercent {
    width: 20%;
  }

  .tasklabel .el-input {
    width: 200px;
    display: flex;
    flex-wrap: nowrap;

  }

  .videoCss /deep/.el-upload {
    height: 200px;
  }

  /* 图片上传css */
  .avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  .deleteClass {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 16px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background: #00000066;
    color: #e4dcdc;
  }
</style>
